<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h4>webpack优化</h4>
    <ul>
        <li>优化打包结果</li>
        <li>压缩代码、删除多余代码、注释、简化代码 uglifyjs和paralleryuglify压缩js文件，cssnano压缩css文件</li>
        <li>cdn加速</li>
        <li>删除死代码</li>
        <li>提取公共代码</li>
    </ul>
</section>
<section>
    <h4>webpack - 提高构建速度</h4>
    <ul>
        <li>commonsplugin提取公共代码</li>
        <li>externals提取常用库</li>
        <li>dllplugin(预编译)和dllreference(将预编译的模块加在进来)</li>
        <li>happypack实现多线程编译</li>
        <li>treeshaking</li>
    </ul>
</section>
<section>
    <h4>webpack热更新原理</h4>
    <ol>
        <li>服务端和浏览器各有一个websocket服务</li>
        <li>服务端的文件改变后，重新打包，利用done.hook通知浏览器文件改变，并且传递一个hash给浏览器</li>
        <li>浏览器根据这个hash去服务器请求hash.hot.update.json文件，找到变动的模块id</li>
        <li>浏览器利用script标签请求这个chunkid.hash.hot.update.js文件</li>
        <li>这个js文件，会有这个模块id变化后的代码，将这个代码替换掉原来的代码</li>
        <li>然后找到模块父模块，是否注册过hot回调，然后执行</li>
    </ol>
</section>
</body>
</html>
